{extend name='index/index'/}
{block name="main"}
<style>
    .tab-content{
        box-shadow: 0 0 0;
    }
    #filePicker div:nth-child(2){width:100%!important;height:100%!important;}
    #icon div:nth-child(2){width:100%!important;height:100%!important;}
    .file-item{

        text-align: center;
        margin: 8px;
        width: 130px;
        height: 130px;

        position: relative;
        float: left;
    }

    .file-item img{
        width: 130px;
        height: 130px;
        position:absolute;
        left:0;
        top:0;
        z-index:1;
    }
    .make{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        display: none;
    }
    .make i{
        color: #fff;
        font-size: 32px;
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h4 class="pull-left page-title">{$title}</h4>
                <ol class="breadcrumb pull-right">
                    <li>{$title}</li>
                    <li class="active">{$name}</li>
                </ol>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">{$name}</h3>
                    </div>
                    <div class="panel-body">
                        <div class="col-lg-12">

                            <form action="{:url('good/add')}"  target="frame" method="post" id="Add" style="margin-top: 20px">

                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="good_name">商品名称 *</label>
                                        <div class="col-lg-7">
                                            <input class="form-control required" id="good_name" name="good_name" type="text">
                                        </div>
                                        <div class="col-lg-4">
                                           *（必填）商品的名称
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="good_s_name">商品短标题 *</label>
                                        <div class="col-lg-7">
                                            <textarea class="form-control" name="good_s_name" id="good_s_name"></textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            *（必填）商品的名称
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="keys">商品关键字 </label>
                                        <div class="col-lg-7">
                                            <input class="form-control " id="keys" name="keys" type="text">
                                        </div>
                                        <div class="col-lg-4">
                                            多个关键字用逗号隔开，如海尔，空调
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="dept_ids">商品分类 </label>
                                        <div class="col-lg-7">
                                            <input type="hidden" class="form-control" id="dept_id" name="cate_id"    placeholder="商品分类">
                                            <input type="text" class="form-control required" name="dept_ids" id="dept_ids"    placeholder="商品分类">

                                        </div>
                                        <div class="col-lg-4">
                                            商品分类
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="good_img">商品图片 *</label>
                                        <div class="col-lg-7">
                                        <div class="input-group ">
                                            <input type="text" id="good_img" name="good_img" class="form-control required" placeholder="商品图片">
                                                        <span class="input-group-btn">
                                                         <div id="uploaders" class="wu-example">
                                                             <div id="icon" class="btn btn-info waves-effect waves-light"  >上传图片</div>

                                                         </div>
                                                        </span>
                                        </div>
                                            </div>
                                        <div class="col-lg-4">
                                            多个关键字用逗号隔开，如海尔，空调
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="userName1">商品价格 *</label>
                                        <div class="col-lg-7">
                                            <div class="input-group ">
                                                <span class="input-group-addon">市场价</span>
                                                <input type="text"  name="price" class="form-control" placeholder="市场价">
                                                <span class="input-group-addon">商城价</span>
                                                <input type="text"  name="mall_price" class="form-control required" placeholder="商城价">

                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            多个关键字用逗号隔开，如海尔，空调
                                        </div>
                                    </div>

                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="userName1">属性</label>
                                        <div class="col-lg-7" style="margin-top: 5px;">

                                                <div class="checkbox checkbox-inline">
                                                    <input type="checkbox" name="is_home" id="inlineCheckbox1" value="1">
                                                    <label for="inlineCheckbox1"> 首页推荐 </label>
                                                </div>
                                            <div class="checkbox checkbox-success checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox2" name="is_new" value="1" checked="checked">
                                                <label for="inlineCheckbox2"> 新品上市 </label>
                                            </div>

                                        </div>
                                        <div class="col-lg-4">
                                            多个关键字用逗号隔开，如海尔，空调
                                        </div>
                                    </div>

                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="userName1">商品图片相册 </label>
                                        <div class="col-lg-7">
                                            <div id="uploader">
                                                <div id="filePicker" class=" btn btn-info waves-effect waves-light">上传图片</div>
                                                <div id="fileList" class="uploader-list">

                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            可以多选上传,最大支持五张图片
                                        </div>
                                    </div>

                                    <!--<div class="form-group clearfix" >-->
                                        <!--<label class="col-lg-1 control-label" >规格设置 </label>-->
                                        <!--<div class="col-lg-3">-->
                                            <!--<input class="form-control " name="name[]" type="text" placeholder="规格名称">-->
                                        <!--</div>-->
                                        <!--<div class="col-lg-3">-->
                                            <!--<input class="form-control " name="pricespec[]" type="text" placeholder="规格价格">-->
                                        <!--</div>-->
                                        <!--<div class="col-lg-1">-->
                                            <!--<div class="btn btn-icon waves-effect waves-light btn-info m-b-5 ggadd"> <i class="md md-add"></i> </div>-->
                                        <!--</div>-->
                                        <!--<div class="col-lg-4">-->
                                            <!--规格设置-->
                                        <!--</div>-->

                                    <!--</div>-->
                                <!--<div class="item">-->


                                <!--</div>-->

                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" >分享标题 </label>
                                        <div class="col-lg-7">
                                            <input class="form-control " name="wx_title" type="text">
                                        </div>
                                        <div class="col-lg-4">
                                            分享标题
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="userName1">分享说明 </label>
                                        <div class="col-lg-7">
                                            <textarea class="form-control" name="wx_cont"></textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            分享标题
                                        </div>
                                    </div>


                                    <div class="form-group clearfix">
                                        <label class="col-lg-1 control-label" for="userName1">商品详情 </label>
                                            <div class="col-lg-7">
                                                <script src="__JS__/ueditor/ueditor.config.js"></script>
                                                <script src="__JS__/ueditor/ueditor.all.js"></script>
                                                <textarea id="content" name="context" style="width: 100%"></textarea>
                                                <script type="text/javascript">
                                                    var ue = UE.getEditor('content',{
                                                        serverUrl :'{:url("ueditor/index")}',
                                                        initialFrameHeight:400
//
                                                    });
                                                    editor.render("content");
                                                </script>
                                        </div>

                                    </div>


                            <div class="form-group ">
                                <div class=" col-sm-9">
                                    <button type="submit" class="btn btn-info waves-effect waves-light">保存</button>
                                </div>
                            </div>
                            </form>

                        </div>


                    </div>  <!-- End panel-body -->
                </div> <!-- End panel -->

            </div> <!-- end col -->

        </div>

    </div>
</div>
<link href="__JS__/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script src="__JS__/layer/layer.js"></script>
<link href="__JS__/webuploader/webuploader.css" rel="stylesheet" type="text/css">
<script src="__JS__/webuploader/webuploader.js"></script>
<script src="__JS__/jquery-validation/dist/jquery.validate.min.js"></script>

<script>
    $().ready(function() {

        $("#Add").validate({

            messages: {
                good_name: "商品名称不能为空",
                good_img:"商品图片不能为空",
                mall_price:"商城价格不能为空",
                dept_ids:"商品分类不能为空"
            },
            showErrors: function(errorMap, errorList) {

                $.each(errorList, function (i, v) {

                    layer.tips(v.message, v.element, {tips: [1, '#3595CC'], time: 2000 });
                    return false;
                });
                onfocusout: false
            }
        });

    });

    $.validator.setDefaults({
        submitHandler: function () {


            $('#Add').submit();

        }
    });


    $('#dept_ids').on('click',function () {
        layer.open({
            type: 2,
            area: ['300px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            content: "cate.html",
            title:"选择分类"
        });

    });

    var uploaders = WebUploader.create({
        auto: true,
        swf: '/static/admin/js/uploader/Uploader.swf',
        server: "{:url('upload/upload')}",
        pick: '#icon',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        formData: {
            face: 'good',
            wight: 300,
            height: 200
        },
        fileNumLimit:1
    });

    uploaders.on('uploadAccept', function (fieldata, ret) {

        $('#good_img').val(ret.urls);
        //$('.input-group-addon').html("<img src='__UP__"+ret.urls+"''/>");
    });

    var uploader =WebUploader.create({
        auto: true,
        swf: '/static/admin/js/uploader/Uploader.swf',
        server: "{:url('upload/upload')}",
        pick: '#filePicker',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        formData: {
            face: 'good',
            wight: 300,
            height: 200
        },
        fileNumLimit:5
    });
    uploader.on('uploadAccept', function (fieldata, ret) {

        //if (ret.code == 'SUCCESS') {
            console.log(ret);
            addFile(ret);
        //}else{

      //  }
    });
    uploader.on('error',function () {
       layer.msg('上传数量超过5张！');
    });
    $list = $('#fileList');
    function addFile(ret) {

        var $li = $(
                '<div  class="file-item thumbnail  dd_'+ret.data+'" >' +
                '<img src="__UP__/'+ret.urls+'">' +
                '<input name="allimg[]" type="hidden" value="'+ret.urls+'">' +
                ' <div class="make ln" data-url="'+ret.urls+'">'+

                '<i class="md  md-clear" ></i>'+
                ' </div>' +
                '</div>'
        );
        $list.prepend( $li );
        $('.file-item').hover(function () {
           $(this).children('.make').show();

        },function () {
            $(this).children('.make').hide();
        });

        $('.ln').click(function () {
         var urls=$(this).attr('data-url');
            $.ajax({
                type: 'POST',
                url: "{:url('upload/del')}",
                data: {
                    "path" : urls
                },
                success:  function(ret) {

                    if(ret.code==1){

                        layer.msg('删除成功！');


                    }else{
                        layer.msg('删除失败！');
                    }
                }

            });

            $(this).parent('.file-item').remove();
             uploader.reset();
        });
}
//
//     var i=0;
// $('.ggadd').click(function () {
//     //点击添加向item里添加无素
//     i++;
//     var htmls=' <div class="form-group clearfix form-group'+i+'" >'+
//             '<label class="col-lg-1 control-label" >规格'+i+'设置 </label>'+
//             '<div class="col-lg-3">'+
//             '<input class="form-control " name="wx_title" type="text" placeholder="规格名称">'+
//            ' </div>'+
//             '<div class="col-lg-3">'+
//             '<input class="form-control " name="wx_title" type="text" placeholder="规格价格">'+
//            '</div>'+
//            ' <div class="col-lg-1">'+
//             '<div class="btn btn-icon waves-effect waves-light btn-info m-b-5" onclick="del('+i+')"> <i class="md md-remove" ></i> </div>'+
//             '</div>'+
//             '<div class="col-lg-4">规格'+i+'设置'+
//             '</div></div>';
//  $('.item').append(htmls);
//
// });
//     function del(i) {
//         $('.form-group'+i).remove();
//     }




</script>

{/block}